<template>
	<view>
		<view class="top">
			<view class="topT flex-between">
				<view class="topT-Left flex-row">
					<view class="topT-Left-title">
						商品评价
					</view>
					<uni-rate allow-half :value="evaluation" :size="12" color="#D9D9D9" active-color="#EC615C"
						:readonly="true" @change="evaluationChange" />
					<view class="score">
						{{ evaluation }}
					</view>
				</view>
				<view class="topT-Right">
					好评率 {{ hao_rate }}%
				</view>
			</view>
			<view class="topB flex-row">
				<view class="topB-title">
					全部评价（{{ total }}）
				</view>
				<!-- <view class="topB-sign">
					最新
				</view> -->
			</view>
		</view>

		<view class="line"></view>

		<view class="list">
			<view class="listItem" v-for="item in list" :key="item.id">
				<view class="info flex-row" v-if="item.user">
					<image class="avatar" :src="item.user.avatar"></image>
					<view class="infoL">
						<view class="infoLT flex-row">
							<view class="nickname">
								{{ item.user.nickname }}
							</view>
							<view class="grade" v-if="item.user.levelName != '无效等级'">
								{{ item.user.levelName }}
							</view>
						</view>
						<view class="infoLB flex-row">
							{{ item.createdAt }}
						</view>
					</view>
				</view>
				<uni-rate allow-half :value="item.score" :size="12" :readonly="true" color="#D9D9D9" active-color="#EC615C" />
				<!-- <view class="sign flex">
					<view class="signItem">
						产品功能
					</view>
					<view class="signItem">
						产品材质
					</view>
					<view class="signItem">
						商品材质
					</view>
				</view> -->
				<view class="textBox">
					{{ item.content }}
				</view>
				<view class="fileBox flex">
					<video :src="item.video" :controls="true" class="file"></video>
					<image class="file" :src="item2" v-for="(item2,index2) in item.images"
						:key="index2" @click="onImg(item2)"></image>
				</view>
			</view>
		</view>
		<uni-load-more :status="listStatus"></uni-load-more>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				evaluation: "0",
				
				total: 0,
				hao_rate: "0",

				id: "",
				list: [],
				form: {
					page: 1,
					lastId: 0,
				},
				loading: false,
				finished: false,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.list = [];
			this.form.page = 1;
			this.form.lastId = 0;
			this.loading = false;
			this.finished = false;
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		computed: {
			listStatus() {
				if (this.finished) return "noMore";
				if (this.loading) return "loading";
				return "more";
			}
		},
		methods: {
			evaluationChange(e) {
				// console.log('evaluationChange发生改变:' + JSON.stringify(e));
				this.evaluation = e.value;
			},
			onImg(img) {
				uni.previewImage({
					urls: [img]
				})
			},
			getList() {
				if (this.loading || this.finished) return;
				this.loading = true;
				this.$post({
					url: "/portal/Shop",
					module: 'Comment',
					interface: 1002,
					data: {
						goodsId: this.id,
						status: 0,
						...this.form
					},
				}).then(res => {
					// console.log(res, "评价列表");
					this.list = this.list.concat(res.list);
					this.total = res.total;
					this.hao_rate = res.hao_rate;
					this.evaluation = res.haoping;
					this.form.page = res.currentPage + 1;
					this.form.lastId = res.lastId;
					if (this.form.page > res.lastPage) {
						this.finished = true;
					}
					this.loading = false;
				}).catch(() => {
					this.loading = false;
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.top {
		width: 100%;
		padding: 8rpx 30rpx 20rpx;
		background-color: #ffffff;

		.topT {
			.topT-Left {
				.topT-Left-title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
					margin-right: 16rpx;
				}

				.score {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #EC615C;
					margin-left: 16rpx;
				}
			}

			.topT-Right {
				font-size: 24rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #000000;
			}
		}

		.topB {
			margin-top: 16rpx;

			.topB-title {
				padding: 2rpx 8rpx;
				background: #FFE1D5;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #EEAC80;
			}

			.topB-sign {
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				padding: 2rpx 6rpx;
				background: #F7F7F7;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				margin-left: 16rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 16rpx;
		background: #F0F0F0;
		border-radius: 0px 0px 0px 0px;
	}

	.list {
		width: 100%;
		padding: 16rpx 30rpx 0;

		.listItem {
			width: 100%;
			margin-bottom: 24rpx;

			.info {
				margin-bottom: 16rpx;

				.avatar {
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}

				.infoL {
					padding-left: 24rpx;

					.infoLT {
						.nickname {
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
						}

						.grade {
							font-size: 20rpx;
							font-family: PingFang SC-Medium, PingFang SC;
							font-weight: 500;
							color: #FFCE7D;
							padding: 2rpx 14rpx;
							background: linear-gradient(256deg, #FD6B50 0%, #FD8D66 100%);
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							margin-left: 16rpx;
						}
					}

					.infoLB {
						font-size: 20rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
					}
				}
			}

			.sign {
				margin-top: 8rpx;

				.signItem {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #EEAC80;
					padding: 2rpx 6rpx;
					background: #FFE1D5;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 12rpx;
				}
			}

			.textBox {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
			}

			.fileBox {
				margin-top: 16rpx;
				flex-wrap: wrap;

				.file {
					width: 98rpx;
					height: 98rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					margin-right: 24rpx;
					margin-bottom: 16rpx;
				}
			}
		}
	}
</style>
